<template>
	<view class="middle-module">
		<z-paging ref="paging" v-model="data.dataList" @query="queryList">
			<template #top>
				<view class="button-list">
					<view class="item" style="margin-right: 24rpx;" @click="itemClick('')">
						<image class="icon" src="../../static/images/yellow-icon.png"></image>
						<view>
							<view class="text">发起合同</view>
							<view class="tip">点击快速发起合同</view>
						</view>
					</view>
					<view class="item" @click="gosighList">
						<image class="icon" src="../../static/images/blue-icon.png"></image>
						<view>
							<view class="text">签署方</view>
							<view class="tip">合同的双方信息</view>
						</view>
					</view>
				</view>
				<view class="list-text"> 可使用已创建的合同模板，快速创建合同 </view>
			</template>
			<view class="file-box">
				<view class="card" v-for="(item,index) in data.dataList" :key="index" @click="itemClick(item)">
					<image class="item-icon" src="../../static/images/file-paste_normal.png" />
					<view class="file-names">{{ item.contract_tpl_title }}</view>
					<view class="file-button">发起合同</view>
				</view>
			</view>
		</z-paging>
	</view>
	<Tabbar :current-page="2"></Tabbar>
</template>
<script setup>
	import {
		memberTemplateList,
		userTemplateList
	} from "../../api/module/contract.js"
	import {
		reactive,
		ref
	} from 'vue'
	import {
		useStore
	} from 'vuex';
	import {
		authentication
	} from "../../utils/contract/isAuthentication.js"
	import {
		goNav
	} from "../../utils/common";
	import {
		onShow
	} from "@dcloudio/uni-app";
	const data = reactive({
		dataList: [],
		signedUrl: {
			1: '/pages/contract/person/signed',
			2: '/pages/contract/enterprise/signed',
		},
		initiateUrl: {
			1: '/pages/contract/person/initiate',
			2: '/pages/contract/enterprise/initiate',
		},
		templateListUrl: {
			1: '/pages/contract/person/templateList',
			2: '/pages/contract/enterprise/templateList',
		},
	})
	const paging = ref(null)
	const store = useStore()
	const userType = ref(1);
	const templateList = () => {
		let _userType = store.state.userType;
		let _url = data.templateListUrl[_userType];
		goNav(_url);
	}
	const itemClick = async (item) => {
		if (!await authentication(store.state.userType)) {
			let msg = userType.value == 1 ? '请先实名认证' : '请先认证新企业'
			uni.$u.toast(msg)
			setTimeout(() => {
				goNav(arrayGet(pageUrl, `realnameUrl.${userType.value}`))
			}, 1500)
			return
		}
		let _userType = store.state.userType;
		let _url = data.initiateUrl[_userType];
		if (item) {
			_url += '?id=' + item.contract_tpl_id
		}
		goNav(_url);
	}
	const gosighList = (item) => {
		let _userType = store.state.userType;
		goNav(data.signedUrl[_userType]);
	}
	const initiate = () => {
		let _userType = store.state.userType;
		let _url = data.initiateUrl[_userType];
		goNav(_url);
	}
	const queryList = (pageNo, pageSize) => {
		let params = {
			page: pageNo,
			limit: pageSize,
		}
		if (store.state.userType == 1) { //个人
			memberTemplateList(params).then(res => {
				paging.value.complete(res.data)
			})
		} else { //企业
			userTemplateList(params).then(res => {
				paging.value.complete(res.data)
			})
		}
	}
	onShow(() => {
		paging.value.reload();
	})
</script>
<style lang="less" scoped>
	.middle-module {
		width: 100%;
		height: calc(100vh - 130rpx);
		backdrop-filter: blur(3px);

		.button-list {
			width: 100%;
			display: flex;
			height: 180rpx;
			justify-content: space-between;
			padding: 0 66rpx;

			.item {
				width: 332rpx;
				height: 118rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05), 0rpx 4rpx 8rpx -2rpx rgba(0, 0, 0, 0.12);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 24rpx;

				.icon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 14rpx;
				}

				.text {
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #000000;
					line-height: 28rpx;
				}

				.tip {
					font-size: 18rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.4);
					line-height: 18rpx;
					margin-top: 10rpx;
				}
			}

			.item {
				border-radius: 16rpx;
			}
		}
	}

	.list-text {
		font-size: 24rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.6);
		line-height: 34rpx;
		margin-top: 40rpx;
		margin-left: 32rpx;
	}

	.file-box {
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.card {
		display: flex;
		border-bottom: 1rpx solid #F2F2F2;
		padding: 26rpx 0;
		align-items: center;

		.item-icon {
			width: 22rpx;
			height: 28rpx;
		}

		.file-names {
			font-size: 26rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #000000;
			margin: 0 8rpx;
			flex: 1;
		}

		.file-button {
			font-size: 24rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			width: 160rpx;
			height: 50rpx;
			background: #4787F0;
			border-radius: 46rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>